<template>
	<view class="contont">
		<nav-bar :title="pageInfo.navbarTitle" :iconLeft="true" />
		<view class="content-bgc">
			<view class="b-con">
				<uni-forms :model="form" :rules="rules" ref="refForm" label-width="100px">
					<uni-forms-item label="所属租户" name="company" required>
						<uni-data-select v-model="form.company" :localdata="company_list" placeholder="请选择所属租户" mode="underline"
							:clear="false" />
					</uni-forms-item>
					<uni-forms-item label="登录账号" name="username" required>
						<uni-easyinput v-model="form.username" placeholder="请输入登录账号" class="iptBor" :inputBorder="false" />
					</uni-forms-item>
					<uni-forms-item v-if="pageInfo.type == 'add'" label="登录密码" name="password" required>
						<uni-easyinput v-model="form.password" placeholder="请输入登录密码" class="iptBor" :inputBorder="false" />
					</uni-forms-item>
					<uni-forms-item label="所属员工" name="staff">
						<uni-data-select v-model="form.staff" :localdata="staff_list" placeholder="请选择所属员工" mode="underline"
							:clear="true" @change="change_fullName" />
					</uni-forms-item>
					<uni-forms-item label="用户名" name="full_name">
						<uni-easyinput v-model="form.full_name" placeholder="请输入用户名" :disabled="Boolean(form.staff)" class="iptBor" :inputBorder="false" />
					</uni-forms-item>
					<uni-forms-item label="所属角色" name="role_permission">
						<uni-data-select v-model="form.role_permission" :localdata="role_list" multiple placeholder="请选择所属角色"
							mode="underline" :clear="false" />
					</uni-forms-item>
					<uni-forms-item label="备注">
						<uni-easyinput v-model="form.location" type="textarea" placeholder="请输入备注" />
					</uni-forms-item>
					<u-button type="primary" text="提交" @click="save" />
				</uni-forms>
			</view>
		</view>
	</view>
</template>
<script setup>
import { reactive, ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app'
import syAccountApi from '../../../api/system/sy_account'

//页面标题
const pageInfo = reactive({
	navbarTitle: '账号管理',
	type: '',
	edit_id: null,
})

onLoad((option) => {
	get_company_list()
	get_staff_list()
	get_role_list()
	pageInfo.type = option.type
	if (option.type == 'edit') {
		pageInfo.navbarTitle = `${pageInfo.navbarTitle}(修改)`
		get_detail(option.id)
		pageInfo.edit_id = option.id
	} else {
		pageInfo.navbarTitle = `${pageInfo.navbarTitle}(新增)`
	}
})

const refForm = ref(null);
const form = reactive({
	company: null,
	username: '',
	password: '',
	desc: '',
	full_name: '',
	staff: null,
	role_permission: []
});
const fields = Object.keys(form)
const rules = {
	company: { rules: [{ required: true, errorMessage: '请选择租户' }] },
	username: { rules: [{ required: true, errorMessage: '请输入登录账号' }] },
	password: { rules: [{ required: true, errorMessage: '请输入登录密码' }] },
	staff: { rules: [{ required: true, errorMessage: '“所属员工” 和 “用户名” 至少填写一个' }] },
	full_name: { rules: [{ required: true, errorMessage: '“所属员工” 和 “用户名” 至少填写一个' }] },
};

//详情
function get_detail(id) {
	syAccountApi.account_detail(id).then(res => {
		const record = uni.$lodash.pick(res, fields) //过滤表单需要的字段
		Object.assign(form, record)
	})
};

function change_fullName(id){
	form.full_name = staff_list.value.find(v=>v.value==id)?.text

}

//提交表单
function save() {
	refForm.value.validateField(['company', 'username', 'password', 'full_name']).then(() => {
		const params = uni.$lodash.cloneDeep(form) // 深拷贝一份form表单
		if (pageInfo.type == 'add') {
			syAccountApi.post_account(params).then(res => {
				uni.$u.toast('添加成功')
				setTimeout(() => {
					backRefsh();
				}, 1000)
			})
		} else {
			//修改
			syAccountApi.patch_account(params, pageInfo.edit_id).then((res) => {
				uni.$u.toast('修改成功')
				setTimeout(() => {
					backRefsh();
				}, 1000)
			})
		}
	}).catch((error) => {
		const a = error.some(v => v.key == "full_name")
		if (a) {
			refForm.value.validateField(['staff']).then()
		}
		uni.$u.toast(error[0].errorMessage);
	})
}

const company_list = ref([])
function get_company_list() {
	syAccountApi.get_company({ page: 1, page_size: 99999 }).then((res) => {
		company_list.value = res.results.map(v => ({
			text: v.name, value: v.id
		}))
	})
}

const staff_list = ref([])
function get_staff_list() {
	syAccountApi.get_staff({ page: 1, page_size: 99999 }).then((res) => {
		staff_list.value = res.results.map(v => ({
			text: v.full_name, value: v.id
		}))
	})
}

const role_list = ref([])
function get_role_list() {
	syAccountApi.get_role_permission({ page: 1, page_size: 99999 }).then((res) => {
		role_list.value = res.results.map(v => ({
			text: v.name, value: v.id
		}))
	})
}

//返回上一级并刷新上一级页面
function backRefsh() {
	uni.navigateBack({
		delta: 1, // 返回的页面层数，1 表示返回上一级
		success: () => {
			uni.$bus.useBusEmit('de_list');
		}
	})
};
</script>

<style lang="scss" scoped></style>